<template>
  <view class="main">
    <!-- 顶部导航栏 -->
    <u-navbar
      title="个人简历"
      @leftClick="navigateBack"
      safeAreaInsetTop
      fixed
      placeholder
      :autoBack="true"
    ></u-navbar>

    <!-- 简历内容 -->
    <view class="main_content">
      <!-- 基本信息 -->
      <view class="basic_info card">
        <view class="basic-left">
         <image src="https://zhimao.shengdunyun.net/uploads/wangeditor/20250308/67cbf1b8b89f9.png"></image>
        </view>
        <view class="basic-right">
			<view class="age_education">
				<text class="name">{{ info.name || '未知' }}</text>
				<text class="status">刚刚活跃</text>
			  <text>{{ info.age || '未知' }}岁</text>
			  <text>{{ info.education || '未知' }}</text>
			  <text>{{ info.job_status || '未知' }}</text>
			</view>
			<view class="height_weight">
			  <text>身高{{ info.height || '未知' }} / 体重{{ info.weight || '未知' }}</text>
			</view>
		</view>
      </view>

      <!-- 联系信息 -->
      <view class="contact_info card">
		  <view class="expectation_title">
		    <text>基本信息</text>
		  </view>
        <view class="contact-content">
			<view class="contact-left">
				<view class="phone">
				  <text>联系电话：{{ info.phone || '未知' }}</text>
				</view>
				<view class="email">
				  <text>邮箱：{{ info.email || '未知' }}</text>
				</view>
			</view>
			<view class="contact-right">
				<view class="hukou">
				  <text>户籍：{{ info.huji || '未知' }}</text>
				</view>
				<view class="previous_job">
				  <text>目前状态：{{ info.previous_job || '未知' }}</text>
				</view>
			</view>
		</view>
      </view>

		<!-- 下载简历按钮 -->
		      <view class="download_resume card">
				  <image src="https://zhimao.shengdunyun.net/uploads/wangeditor/20250308/67cbf2dbc4802.png" class="download-img"></image>
		        <button class="download_button" @click="downloadResume">下载简历</button>
		      </view>

      <!-- 求职意向 -->
      <view class="expectation card">
        <view class="expectation_title">
          <text>期望职位</text>
        </view>
        <view class="expectation_content">
          <text>{{ info.expect_city || '未知' }} | {{ info.expect_position || '未知' }}</text>
          <text>{{ info.expect_industry || '未知' }} | {{ info.expect_salary || '未知' }}</text>
        </view>
		<view class="expectation_title">
		  <text>岗位经验</text>
		</view>
		<view class="expectation_content">
		  <text>{{ info.expect_city || '未知' }} </text>
		</view>
      </view>

      <!-- 工作经验 -->
      <view class="work_experience card">
        <view class="work_experience_title">
          <text>工作经验</text>
        </view>
        <view class="work_experience_content">
          <block v-for="(item, index) in info.work_experience" :key="index">
            <view class="experience_item">
              <text class="company">{{ item.company || '未知' }} {{ item.start_date || '未知' }} - {{ item.end_date || '未知' }}</text>
              <text class="position">{{ item.position || '未知' }}</text>
              <text class="description">{{ item.description || '未知' }}</text>
            </view>
          </block>
        </view>
      </view>

      <!-- 项目经历 -->
      <view class="project_experience card">
        <view class="project_experience_title">
          <text>项目经历</text>
        </view>
        <view class="project_experience_content">
          <block v-for="(item, index) in info.project_experience" :key="index">
            <view class="project_item">
              <text class="project_name">{{ item.name || '未知' }} {{ item.start_date || '未知' }} - {{ item.end_date || '未知' }}</text>
              <text class="role">{{ item.role || '未知' }}</text>
              <text class="description">{{ item.description || '未知' }}</text>
            </view>
          </block>
        </view>
      </view>

      <!-- 教育经历 -->
      <view class="education_experience card">
        <view class="education_experience_title">
          <text>教育经历</text>
        </view>
        <view class="education_experience_content">
          <block v-for="(item, index) in info.education_experience" :key="index">
            <view class="education_item">
              <text class="school">{{ item.school || '未知' }} {{ item.start_date || '未知' }} - {{ item.end_date || '未知' }}</text>
              <text class="major">{{ item.major || '未知' }} {{ item.degree || '未知' }}</text>
            </view>
          </block>
        </view>
      </view>

      <!-- 资质证书 -->
      <view class="certifications card">
        <view class="certifications_title">
          <text>资质证书</text>
        </view>
        <view class="certifications_content">
          <text>{{ info.certifications || '未知' }}</text>
        </view>
      </view>

      <!-- 专业技能 -->
      <view class="skills card">
        <view class="skills_title">
          <text>专业技能</text>
        </view>
        <view class="skills_content">
          <text>{{ info.skills || '未知' }}</text>
        </view>
      </view>

      <!-- 作品集 -->
      <view class="portfolio card">
        <view class="portfolio_title">
          <text>视频作品 图片作品</text>
        </view>
        <view class="portfolio_content">
          <block v-for="(item, index) in info.portfolio" :key="index">
            <image class="portfolio_image" :src="item" mode="aspectFill" @click="previewImage(index)"></image>
          </block>
        </view>
      </view>

     <!-- 底部操作栏 -->
         <view class="footer">
           <view class="footer-icons">
             <view class="icon-item" @click="toggleFavorite">
               <u-icon :name="isFavorite ? 'star-fill' : 'star'" size="40" :color="isFavorite ? '#ffcc00' : '#333'"></u-icon>
               <text>{{ isFavorite ? '已收藏' : '收藏' }}</text>
             </view>
             <view class="icon-item" @click="shareResume">
               <u-icon name="share" size="40" color="#333"></u-icon>
               <text>分享</text>
             </view>
           </view>
           <view class="footer-buttons">
             <button class="footer-button reject" @click="rejectCandidate">不合适</button>
             <button class="footer-button contact" @click="contactCandidate">立即沟通</button>
           </view>
		</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      info: {
        name: '李某某',
        age: '28',
        education: '本科',
        job_status: '离职-随时到岗',
        height: '170',
        weight: '136',
        phone: '1300000000',
        email: '112929131698@qq.com',
        huji: '广东',
        previous_job: '离职',
        expect_city: '佛山',
        expect_position: '销售经理',
        expect_industry: '行业不限',
        expect_salary: '8k-10k',
        work_experience: [
          {
            company: '佛山某某某专业公司',
            start_date: '2020.01',
            end_date: '2024.11',
            position: '销售经理',
            description: '1.负责什么工作内容？2.负责什么工作内容？3.负责什么工作内容？'
          }
        ],
        project_experience: [
          {
            name: '佛山某某某专业公司',
            start_date: '2020.01',
            end_date: '2024.11',
            role: '销售经理',
            description: '1.负责什么工作内容？2.负责什么工作内容？3.负责什么工作内容？'
          }
        ],
        education_experience: [
          {
            school: '佛山大学',
            start_date: '2020.01',
            end_date: '2024.11',
            major: '专业',
            degree: '本科'
          }
        ],
        certifications: '什么证书 什么证书 什么证书 什么证书',
        skills: '熟练掌握PDF, WORD, 具有思维创新能力；PPT, EXCEL等办公软件；其他技能有一定的软件能力',
        portfolio: [
          'https://example.com/image1.jpg',
          'https://example.com/image2.jpg'
        ]
      }
    };
  },
  methods: {
    navigateBack() {
      uni.navigateBack();
    },
	 downloadResume() {
	      console.log("下载简历");
	    },
    previewImage(index) {
      uni.previewImage({
        current: this.info.portfolio[index],
        urs: this.info.portfolio
      });
    },
	// 切换收藏状态
	    toggleFavorite() {
	      this.isFavorite = !this.isFavorite;
	      uni.showToast({
	        title: this.isFavorite ? '已收藏' : '已取消收藏',
	        icon: 'none'
	      });
	    },
	    // 分享简历
	    shareResume() {
	      uni.showToast({
	        title: '分享简历',
	        icon: 'none'
	      });
	    },
	    // 标记为不合适
	    rejectCandidate() {
	      uni.showToast({
	        title: '已标记为不合适',
	        icon: 'none'
	      });
	    },
	    // 立即沟通
	    contactCandidate() {
	      uni.showToast({
	        title: '立即沟通',
	        icon: 'none'
	      });
	    }
  }
};
</script>

<style scoped>
.main {
  padding: 20rpx;
  background-color: #fff;
}

.card {
  background: #fff;
  padding: 20rpx;
  border-bottom: 1px solid #ebebeb;
  margin-bottom: 20rpx;
}

.basic_info{
	display: flex;
}

.basic-left {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

image{
	width: 50px;
height: 50px;
}

.name {
  font-size: 36rpx;
  font-weight: bold;
  margin-right: 10rpx;
}

.status {
  font-size: 28rpx;
  color: #666;
}

.age_education, .height_weight, .phone, .email, .hukou, .previous_job {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.expectation_title, .work_experience_title, .project_experience_title, .education_experience_title, .certifications_title, .skills_title, .portfolio_title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.expectation_content, .work_experience_content, .project_experience_content, .education_experience_content, .certifications_content, .skills_content {
  font-size: 28rpx;
  color: #333;
}

.experience_item, .project_item, .education_item {
  margin-bottom: 20rpx;
}

.company, .project_name, .school {
  font-size: 28rpx;
  font-weight: bold;
  
}

.position, .role, .major {
  font-size: 26rpx;
  color: #666;
  display: block;
}

.contact-left,
.contact-right{
	display: inline-block;
}

.download_resume {
  margin-top: 30rpx;
  display: flex;
  align-items: center;
  text-align: center;
}

.download-img{
	width: 28px;
height: 28px;
}

.download_button {
	width: 75px;
	height: 25px;
  color: #000;
  padding: 8rpx;
  font-size: 24rpx;
  border-radius: 52px;
  border: 0.5px solid #2F318B;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.description {
  font-size: 26rpx;
  color: #333;
}

.portfolio_content {
  display: flex;
  flex-wrap: wrap;
}

.portfolio_image {
  width: 200rpx;
  height: 200rpx;
  margin-right: 10rpx;
  margin-bottom: 10rpx;
  border-radius: 10rpx;
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background: #fff;
  border-top: 1rpx solid #eee;
}

.footer-icons {
  display: flex;
  align-items: center;
}

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20rpx;
}

.icon-item text {
  font-size: 24rpx;
  color: #333;
}

.footer-buttons {
  display: flex;
  align-items: center;
}

.footer-button {
  width: 120px;
  height: 40px;
  border-radius: 50rpx;
  font-size: 28rpx;
  margin-left: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-button.reject {
  background: #f5f5f5;
  color: #333;
}

.footer-button.contact {
  background: linear-gradient(90deg, #9A9AFF 0%, #D6D6FE 100%);;
  color: #fff;
}

</style>